<template>
    <div v-if="views.product_info">
        <van-swipe @change="onChange">
        <van-swipe-item v-for="(item,index) in views.goods_info[current].gallery_v3" :key="index">
            <img :src="item.img_url" style="width:7.2rem"/>
        </van-swipe-item>       
        <template #indicator>
            <div class="custom-indicator">{{ ind + 1 }}/{{views.goods_info[current].gallery_v3.length}}</div>
        </template>
        </van-swipe>
        <!-- $route当前路由的一些信息 -->
        <!-- $route不带r 通常是获取属性 参数params 查询参数query path路径 -->
        <!-- <h1>产品详情-{{ $route.params.id }}</h1> -->
        <!-- 商品名称 -->
        <h1>{{views.product_info.name }}</h1>
        <!-- 商品描述 -->
        <p v-html="views.product_info.product_desc"></p>
        <van-goods-action>
            <van-goods-action-icon icon="cart-o" text="购物车"  @click="$router.push('/cart')" :badge="$store.getters.totalNum"   />
            <van-goods-action-icon icon="shop-o" text="首页" @click="$router.push('/')"   />
            <van-goods-action-icon icon="chat-o" text="客服" @click="$router.back()" />
            <van-goods-action-button type="warning" text="加入购物车" @click="addToCart()" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>
<script>
// 导入获取详情的方法
import {GetDetail} from '@/api/mi.js'
export default {
    name:"productView",
    data(){
        return{
            views:{},
            current:0, //默认是第0个商品
            ind:0
        }
    },
    created(){
        // 获取详情（组件创建完毕）
        GetDetail({
            client_id: 180100031051,
            channel_id: "",
            webp: 1,
            commodity_id: this.$route.params.id,           
            pid:  this.$route.params.id,    
            saleMode: ""
        })
        .then(res=>{
            console.log("res",res.data)
            // 更新视图信息
            this.views = res.data.data;
        })
        .catch(err=>console.log("失败",err))
    },
    methods:{
        onChange(index) {
            this.ind = index;
        },
        addToCart(){
            // 获取当前的商品
            var item  = this.views.goods_info[this.current];
            // 定义添加的数据
            var  data = {
                goods_id:item.goods_id, //商品id
                img_url:item.img_url,//商品图片
                multi_buy_limit:item.multi_buy_limit ,//最大量
                name: item.name ,//商品的名称
                num:1, //购物数量
                price:item.price, //价格
            }
            // var  data = {
            //     goods_id:唯一id, //商品id
            //     img_url:是一个图片地址,//商品图片
            //     multi_buy_limit:{first:10},//最大量
            //     name: item.name ,//商品的名称
            //     num:1, //购物数量
            //     price:item.price, //价格
            // }
            // 执行vuex中actions的addCart方法并传入data参数
            this.$store.dispatch("addCart",data);
    }
}
}
</script>
<style>
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
</style>